<template>
  <div class="SeachList-main">
    <list-nav v-if="haveSeach" :getdata="showArr" v-on="$listeners" :isnone="isNone"></list-nav>
    <div class="tips" v-if="!haveSeach">
      <p>您暂时还未搜索过歌曲，欢迎寻找自己喜欢的歌曲（￣︶￣）↗</p>
    </div>
  </div>
</template>

<script>
import listNav from "@/components/list-nav.vue";
export default {
  components: { listNav },
  data() {
    return {
      haveSeach: false,
      getArr: [],
      showArr: [],
      imgArr : [],
      seachName: "",
      isNone : false
    };
  },
  methods : {
      getMore(){
        if (this.getArr.length >= 6) {
            let newArr = this.getArr.splice(0, 6);
            newArr.forEach((item) => {
              this.showArr.push(item);
            });
            this.isNone = false;
          } else if (this.getArr.length < 6) {
            let newArr = this.getArr.splice(0, this.getArr.length);
            newArr.forEach((item) => {
              this.showArr.push(item);
            });
            this.isNone = true;
          }
      }
  },
  watch: {
    $route: {
      deep: true,
      immediate: true,
      handler() {
        this.seachName = this.$route.query.name;
        if (this.seachName === undefined) {
          return;
        }
        this.haveSeach = true;
        axios.get(`/api/cloudsearch?keywords=${this.seachName}&type=1`).then(response=>{
            this.imgArr = [];

            response.data.result.songs.forEach(item=>{
                this.imgArr.push(item.al.picUrl);
            })

            axios.get(`/api/search?keywords=${this.seachName}`).then((response) => {
              this.getArr = [...response.data.result.songs];
              this.getArr.forEach((item,index) => {
                  item.imgSrc = this.imgArr[index]
              })
              this.showArr = [];
              this.getMore();
            });
        })
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.SeachList-main {
  width: 100%;
}

.tips {
  width: 90%;
  margin: auto;

  > p {
    width: 100%;
    font-size: 1rem;
    font-weight: bolder;
    line-height: 1.5rem;
  }
}
</style>